<template>
  <div :class="'containers ' + (isFull ? 'show-full':'')">
    <div style="margin-bottom: 20px">
      <el-page-header @back="goBack" content="流程设计"></el-page-header>
    </div>
    <div class="bpmn-content with-diagram">
      <div class="canvas" ref="canvas"></div>
      <div class="panel-content">
        <PropertiesPanel ref="panel" v-if="bpmnModeler" :modeler="bpmnModeler" @setFormData="setFormData"></PropertiesPanel>
      </div>
      <div class="bpm-button-group">
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button type="warning">发布</el-button>
        <el-button type="default" @click.native="exportDiagram">导出</el-button>
        <el-button @click="showFull" v-if="fullShowBtnDisable">{{ fullName }}</el-button>
      </div>
    </div>
  </div>
</template>
<style>
.show-full {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999999;
  background: #fff;
  padding-left: 10px;
  padding-right: 40px;
}

.show-full .panel-content {
  margin-right: 30px;
}

.canvas svg{
  background-color: #f6f6f6;
}
</style>
<script>
import '@/assets/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/diagram-js.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import descriptor from '@/components/Workflow/CustomPropertiesPanel/config/custom/descriptor'
import PropertiesPanel from "@/components/Workflow/CustomPropertiesPanel/PropertiesPanel";
import workflow from "@/components/Workflow"
import Utils from '@/utils/utils'

export default {
  components: {PropertiesPanel},
  data() {
    return {
      bpmnModeler: null,
      isFull: false,
      fullName: "全屏",
      bpmXml:workflow.getDefaultBpmXmlContent(),
      formData:null,
      id:undefined
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    this.bpmnModeler = workflow.createBpmnModeler(canvas,{"custom":descriptor});
    this.createNewDiagram()
    console.log(this.$router)
  },
  methods: {
    fullShowBtnDisable() {
      return !Utils.isSafari();
    },
    setFormData(data){
      this.formData = data;
      console.log(this.formData)
    },
    showFull() {
      if (this.isFull) {
        this.isFull = false;
        this.fullName = "全屏"
      } else {
        this.isFull = true;
        this.fullName = "取消全屏"
      }
    },
    createNewDiagram() {
      this.bpmnModeler.importXML(workflow.getDefaultBpmXmlContent()).catch(err => console.log(err))
    },
    saveData(){
      this.$refs.panel.validate();
    },
    getProcessName(){
      let elementRegistry = this.bpmnModeler.get('elementRegistry');
      // 输出可以在浏览器控制台查看prototype中的函数 console.log(elementRegistry)
      let process = elementRegistry.filter(d=>{
        return d.type && d.type === 'bpmn:Process'
      });
      let name = "流程图";
      if(process && process.length > 0){
        name = process[0].name ? process[0].name:name;
      }
      return name + "-" + new Date().getTime();
    },
    goBack(){
      this.$router.back();
      this.isFull = false;
      this.fullName = "全屏"
    },
    exportDiagram() {
      let saveXML = this.bpmnModeler.saveXML();
      saveXML.then(rep =>{
        let url = URL.createObjectURL(new Blob([rep.xml]));
        let a = document.createElement("a");
        a.href = url;
        a.style = "display:none";
        a.download = this.getProcessName() + ".xml";
        a.target = "_blank";
        document.body.appendChild(a);
        a.click();
        a.remove();
      }).catch(error=>{
        console.log(error)
        this.$message.info("导出失败");
      })
    }
  }
}
</script>